昨天我們介紹了 nuxt 專案的結構與在 nuxt 中切換頁面的做法。

今天要來介紹官方文件中比較偏向於概念的章節：

Views

這邊會介紹關於畫面是如何在 Nuxt 被產生的。

從官網的圖片可以得知最外層仍是一個 HTML 的檔案；往內一層則會是所設定的 layout，在這邊有 head 與 middleware；而再更往內的話會是 page，在這一層會有許多的資料與畫面互動的邏輯設定。

• Page：在 page 的元件中有提供了 head 以供設定

<template>
  <h1 class="red">Hello World</h1>
</template>

<script>
  export default {
    head() {
      // 在這邊設定 head 的 Meta Tags
    }
    // ...
  }
</script>

<style>
  .red {
    color: red;
  }
</style>

• Layout：當你想要切換整個專案的視覺主題或是新增一個在每個頁面上都會有的側邊欄時就會想起 layout 的存在了，除了預設的 default.vue 之外，你也可以自訂 layout/blog.vue 在這個資料夾內，並在要使用此 layout 的地方設定：

<template>
  <!-- Your template -->
</template>
<script>
  export default {
    layout: 'blog'
    // page component definitions
  }
</script>

• Error Page：當錯誤發生（SSR 的情況下並不會作用）時會將此頁渲染出來